import { Directive, ElementRef, HostListener, Input } from '@angular/core';

@Directive({
  selector: '[ktHighlight]',
})
export class HighlightDirective {
  @Input('ktHighlight') hColor = 'yellow';
  constructor(private el: ElementRef) {
    console.log(el);
  }
  @HostListener('mouseenter', ['$event']) onMouseEnter(e) {
    console.log(e);
    this.hover(this.hColor);
  }
  @HostListener('mouseleave') onMouseLeave() {
    this.hover('');
  }
  hover(color: string) {
    this.el.nativeElement.style.backgroundColor = color;
  }
}
